<template>
  <div class="home">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据面板</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>资金条数</span>
            </div>
            <template>
              <i class="el-icon-s-data"></i>
              <span>{{ profilecount }}</span>
            </template>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>收入情况</span>
            </div>
            <template>
              <i class="el-icon-s-finance"></i>
              <span>{{ income }}￥</span>
            </template>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>管理员数量</span>
            </div>
            <template>
              <i class="el-icon-s-custom"></i>
              <span>{{ usercount }}</span>
            </template>
          </el-card>
        </el-col>
      </el-row>
      <!-- Echar区域 -->
      <el-row :gutter="30">
        <el-col :span="12">
          <el-card class="box-cardpic">
            <div slot="header" class="clearfix">
              <span>管理员成分</span>
            </div>
            <div id="one"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-cardpic">
            <div slot="header" class="clearfix">
              <span>收支状况</span>
            </div>
            <div id="two"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      usercount: 0,
      profilecount: 0,
      income: 0,
      datapart: [],
      sources: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    initChartsOne() {
      const option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.datapart,
          },
        ],
      };
      var myChartOne = this.$echarts.init(document.getElementById("one"));
      myChartOne.setOption(option);
      window.onresize = function () {
        myChartOne.resize();
      };
    },

    initChartsTwo() {
      const option = {
        dataset: [
          {
            dimensions: ["name", "score"],
            source: this.sources,
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
        },
      };
      var myChartTwo = this.$echarts.init(document.getElementById("two"));
      myChartTwo.setOption(option);
      window.onresize = function () {
        myChartTwo.resize();
      };
    },
    init() {
      this.getSource();
      this.getpart();
      this.getIncome();
      this.getUsercount();
      this.getProfilecount();
      setTimeout(() => {
        this.initChartsOne();
        this.initChartsTwo();
      }, 1000);
    },
    getUsercount() {
      this.$axios
        .get("/total/data/usercount")
        .then((res) => {
          this.usercount = res.data.data[0].count;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getProfilecount() {
      this.$axios
        .get("/total/data/profilecount")
        .then((res) => {
          this.profilecount = res.data.data[0].count;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getIncome() {
      this.$axios
        .get("/total/data/income")
        .then((res) => {
          this.income = res.data.data[0].expend;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getpart() {
      this.$axios
        .get("/total/data/part")
        .then((res) => {
          console.log(res);
          this.datapart = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSource() {
      this.$axios
        .get("/total/data/source")
        .then((res) => {
          console.log(res.data.data);
          this.sources = res.data.data;
          console.log(this.sources);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.container {
  margin-top: 20px;
  font-size: 22px;
}

.container i {
  color: #ffce4c;
}

.box-cardpic {
  margin-top: 40px;
}

.box-cardpic #one {
  width: 100%;
  height: 500px;
}
.box-cardpic #two {
  width: 100%;
  height: 500px;
}
</style>